<template>
  <el-dialog
    title="分配数据权限"
    :visible.sync="distributionDialog"
    width="808px"
    class="dialogTitle distributionDialog"
  >
    <el-form label-width="80px">
      <el-form-item label="角色名称" class="el-form-item-text">
        <el-input :disabled="true" v-model="dialogData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input :disabled="true" v-model="dialogData.permissionCharacter"></el-input>
      </el-form-item>
      <el-form-item label="数据范围">
        <el-select class="form-select" v-model="dialogData.dataRange" @change="selectChange">
          <el-option
            v-for="item in dialogData.dataRangeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-alert
          title='特殊情况下，设置为"自定义数据权限"'
          type="warning"
          show-icon
          :closable="false"
          v-show="dataRangeStatus"
        >
        </el-alert>
      </el-form-item>
      <!-- 数据权限 -->
      <div v-show="dataRangeStatus">
        <el-form-item label="数据权限">
          <el-checkbox
            label="展开/折叠"
            v-model="dialogData.unfoldCollapse"
            @change="unfoldCollapseClick($event, 'menu')"
          ></el-checkbox>
          <el-checkbox
            label="全选/全不选"
            v-model="dialogData.selectAll"
            @change="selectAllClick"
          ></el-checkbox>
          <el-checkbox label="父子联动" v-model="dialogData.linkage"></el-checkbox>
          <div class="selectTreeSection">
            <el-tree
              :data="dialogData.data"
              show-checkbox
              node-key="id"
              :props="dialogData.defaultProps"
              ref="addTree"
              :check-strictly="!dialogData.linkage"
              :default-expand-all="true"
            >
            </el-tree>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="dialog-footer" :class="dataRangeStatus ? '' : 'formItemMarginTop_26px'">
      <cs-btn
        type="primary"
        @click="distributionDialog = false"
        btnText="确定"
        class="confirm_btn dialog_btn"
      />
      <cs-btn @click="distributionDialog = false" btnText="取消" class="dialog_btn" />
    </div>
  </el-dialog>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'

export default {
  components: {
    csBtn
  },
  data() {
    return {
      distributionDialog: false,
      dataRangeStatus: false,
      treeDataID: [],
      dialogData: {
        roleName: '',
        // 权限字符
        permissionCharacter: '',
        // 数据范围
        dataRange: '1',
        dataRangeData: [
          {
            value: '1',
            label: '全部数据权限'
          },
          {
            value: '2',
            label: '自定义数据权限'
          }
        ],
        // 展开/折叠
        unfoldCollapse: true,
        // 全选/全不选
        selectAll: false,
        // 父子联动
        linkage: false,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        data: [
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 4,
                label: '二级 1-1',
                children: [
                  {
                    id: 9,
                    label: '三级 1-1-1'
                  },
                  {
                    id: 10,
                    label: '三级 1-1-2'
                  }
                ]
              }
            ]
          },
          {
            id: 2,
            label: '一级 2',
            children: [
              {
                id: 5,
                label: '二级 2-1'
              },
              {
                id: 6,
                label: '二级 2-2'
              }
            ]
          },
          {
            id: 3,
            label: '一级 3',
            children: [
              {
                id: 7,
                label: '二级 3-1'
              },
              {
                id: 8,
                label: '二级 3-2'
              }
            ]
          }
        ]
      }
    }
  },
  created() {
    this.$bus.$on('distributionDialogVisible', () => {
      this.distributionDialog = true
    })
    // 获取当前数据范围
    this.getdataRangeStatus()
  },
  methods: {
    getdataRangeStatus() {
      if (this.dialogData.dataRange === '1') {
        this.dataRangeStatus = false
      } else if (this.dialogData.dataRange === '2') {
        this.dataRangeStatus = true
      }
    },
    selectChange() {
      this.getdataRangeStatus()
    },
    // 展开/折叠点击事件
    unfoldCollapseClick(value, type) {
      const treeList = this.dialogData.data
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.addTree.store.nodesMap[treeList[i].id].expanded = value
        this.$refs.addTree.root.expanded = value
      }
    },
    // 全选/全不选点击事件
    selectAllClick() {
      if (this.dialogData.selectAll) {
        // 递归获取所有的el-tree数据id
        this.getAllTreeID(this.dialogData.data)
        // 给el-tree设置权限
        this.$refs.addTree.setCheckedKeys(this.treeDataID)
      } else {
        this.$refs.addTree.setCheckedKeys([])
      }
    },
    // 递归选中所有的树形id
    getAllTreeID(arr) {
      arr.forEach((item) => {
        if (item.children) {
          this.treeDataID.push(item.id)
          this.getAllTreeID(item.children)
        } else {
          this.treeDataID.push(item.id)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.el-alert {
  background-color: #fff;
  padding: 0;
  height: 24px;
  color: #888888;
}

.selectTreeSection {
  width: 626px;
  height: 416px;
  border: 1px solid #dddddd;
  overflow: scroll;
}

.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.addRoldDialog .el-form-item {
  margin-bottom: 16px;
}

.addRoldDialog .el-form-item:nth-child(2) {
  margin-bottom: 0;
}

.addRoldDialog .el-form-item:nth-child(3),
.addRoldDialog .el-form-item:nth-child(4) {
  margin-bottom: 8px;
}

.addRoldDialog .el-form-item:last-child {
  margin-bottom: 37px;
}

.form-select {
  width: 100%;
}

.distributionDialog .el-form-item:nth-child(3) {
  margin-bottom: 0;
}

.distributionDialog .el-form-item:last-child {
  margin-bottom: 38px;
}

.formItemMarginTop_26px {
  margin-top: 26px;
}
</style>
